<template>
  <div>
    <div>
      <Header></Header>
    </div>
    <div class="block">
      <el-timeline>

        <el-timeline-item :key="blog.created" :timestamp="blog.created" placement="top" v-for="blog in blogs">
          <el-card>
            <!-- router-link用来跳转详情页，绑定to属性，传入跳转的组件和参数 -->
            <router-link :to="{name:'BlogDetail', params:{blogId:blog.id}}" class="link">
              <h4>{{ blog.title }}</h4>
            </router-link>
            <p>{{ blog.description }}</p>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>
    <div class="page">
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="currentPage"
        :total="total"
        :pageSize="pageSize"
        @current-change="page"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";
export default {
  data() {
    return {
      currentPage: 1,
      blogs: {},
      total: 0,
      pageSize: 4,
    };
  },
  name: "Blogs",
  components: { Header },
  methods: {
    page(currentPage) {
      const _this = this;
      this.$axios.get("/blogs?currentPage="+currentPage).then((res) => {
        _this.blogs = res.data.data.records;
        _this.currentpage = res.data.data.current;
        _this.total = res.data.data.total;
        _this.pageSize = res.data.data.size;
      });
    },
  },
  created() {
    this.page(this.currentPage);
  },
};
</script>

<style>
.block {
  max-height: 60%;
  width: 50%;
  height:550px;
  margin: auto;
}
.page {
  width: 50%;
  margin: auto;
  margin-top: 30px;
  margin-bottom: 60px;
  text-align: center;
}
.link:hover{
  color: blue;
}
</style>